<template>
  <div class="allStyle">
    <homeHeader></homeHeader>
    <div id="bottom">
      <menuNav></menuNav>
      <main id="content">
        <div>
          <el-row>
            <el-button @click="bank" :type="isbank">银行卡账户</el-button>
            <el-button @click="Alipay" :type="isAlipay">支付宝账户</el-button>
          </el-row>
        </div>
        <div v-if="isbank">
          <div style="margin-top: 20px;">
            <el-row>
              <el-button type="primary" @click="addbank">添加银行卡账户</el-button>
            </el-row>
            <div style="display: flex;">
              <div v-for="(item,i) in bankData"
                style="width:250px;height: 120px; border: 1px solid black; margin-right: 10px; background-color: rgb(199, 197, 196); margin-top: 20px;">

                <el-button v-if="isDef=0" style="float: right;" type="text" @click.native="bankstaus(item.id)">点击设为默认
                </el-button>
                <el-button v-if="isDef=1" style="float: right;" type="text" @click.native="bankstaus2(item.id)">已默认
                </el-button>
                <p style="text-align: center; margin-top: 10px; margin-top: 20px;">{{item.bankName}}</p>

                <p style="text-align: center; margin-top: 20px;">{{item.bankAccount}}</p>
              </div>
            </div>
          </div>
          <!-- 添加银行卡弹窗 -->
          <el-dialog title="添加到账银行卡" width="30%" center :visible.sync="dialogFormVisible1" :modal-append-to-body="false"
            label-position="left">
            <el-form :model="bankData" ref="bankData" label-width="100px" class="demo-ruleForm">
              <el-form-item label="公司名字">
                <el-input v-model="bankData.companyName"></el-input>
              </el-form-item>
              <el-form-item label="开户银行">
                <el-input v-model="bankData.bankName"></el-input>
              </el-form-item>
              <el-form-item label="支行名称">
                <el-input v-model="bankData.bankBranckName"></el-input>
              </el-form-item>
              <el-form-item label="银行卡号">
                <el-input v-model="bankData.bankAccount"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="submitbankData">确 定</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
        <div v-if="isalipay">
          <div style="margin-top: 20px;">
            <el-row>
              <el-button type="primary" @click="addalipay">添加支付宝账户</el-button>
            </el-row>
            <div>
              <template>
                <el-table :data="alipayData" style="width:100%;">
                  <el-table-column label="序号" type="index" width="50">
                  </el-table-column>
                  <el-table-column prop="aName" label="名称" width="180">
                  </el-table-column>
                  <el-table-column prop="aAccount" label="账号" width="180">
                  </el-table-column>

                  <el-table-column label="是否默认">
                    <template slot-scope="props">
                      <el-switch v-model="props.row.isDef" width="50" style="margin-right: 10px;" :active-value="1"
                        :inactive-value="0" active-text="是" inactive-text="否" @click.native="toggleStatus(props.row)">
                      </el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="操作">
                    <template slot-scope="props">
                      <el-button type="text" @click="del5(props.row.id)">删除</el-button>
                    </template>
                  </el-table-column>

                </el-table>
              </template>
            </div>
          </div>
          <!-- 添加支付宝账户弹窗 -->
          <el-dialog title="添加账户" width="30%" center :visible.sync="dialogFormVisible2" :modal-append-to-body="false"
            label-position="left">
            <el-form :model="alipayData" ref="alipayData">
              <el-form-item label="姓名" prop="aName" :rules="[
      { required: true, message: '姓名不能为空'},
      { min: 2, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
      
    ]">
                <el-input v-model="alipayData.aName" autocomplete="off"
                  @input='e => alipayData.aName = this.validSe (e)'></el-input>
              </el-form-item>
              <el-form-item label="账号" prop="aAccount" :rules="[
              { required: true, message: '账号不能为空'},
              { min: 3, max: 20, message: '长度在 3到 20个字符', trigger: 'blur' }
              
            ]">
                <el-input v-model="alipayData.aAccount" autocomplete="off"
                   onkeyup="this.value = this.value.replace(/[^\d.a-z@]/g,'');"></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="nosubmit">取 消</el-button>
              <el-button type="primary" @click="submitalipayData('alipayData') ">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
  import menuNav from "../../components/MenuNav";
  import homeHeader from "../../components/Header";
  export default {
    name: "Index",
    components: {
      menuNav,
      homeHeader,
    },
    data() {
      return {
        isyes: true,
        isno: false,
        isbank: "primary",
        isAlipay: "",
        isbank: false,
        isalipay: false,
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        pageNum: 1,
        pageSize: 10,
        records: {},
        bankData: {
          companyName: "",
          bankName: "",
          bankBranckName: "",
          bankAccount: ""
        },
        alipayData: {
          aTypename: "",
          aAccount: "",
          aName: "",
          aSort: 0,
          aType: 0,
          isDef: 0,
        },
      
      };
    },

    created() {
      if(!JSON.parse(sessionStorage.getItem("userMsg"))){
        this.$message("未登录，请去登录")
      }
      this.isbank = true,
        this.isalipay = false
      // 
      this.isbank = "primary",
        this.isAlipay = ""
      this.mchBanklist()
      this.Alipaylist()
    },
    methods: {
      // 银行卡是否设为默认
      bankstaus(event) {
        console.log(event)
        this.$post("/cw/mchBank/updateById", {
          isDef: 1,
          id: event,
          mchId: JSON.parse(sessionStorage.getItem("userMsg")).userId,
          
        }).then(res => {
          if (res.code === 200) {
            console.log(res);
            this.mchBanklist()
          } else {
            console.log('1231235', res)
          }

        })
      },
      // 
      bankstaus2(event) {
        this.$post("/cw/mchBank/updateById", {
          isDef: 0,
          id: event,
          mchId: JSON.parse(sessionStorage.getItem("userMsg")).userId,

        }).then(res => {
          if (res.code === 200) {
            console.log(res);
            this.mchBanklist()
          } else {
            console.log('1231235', res)
          }

        })
      },
      // 支付宝 是否默认按钮
      toggleStatus(row) {
        console.log(row)
        this.alipayData.isDef = row.aStatus
        this.$post("/cw/mchAlipay/updateStatusById", {
          isDef: row.isDef,
          id: row.id,
          mchId: row.mchId

        }).then(res => {
          if (res.data.code === 200) {
            console.log(res);
            this.Alipaylist()
          } else {
            console.log('1231235', res)
          }

        })
      },
      aa(e) {
        console.log(e)
        console.log(this.alipayData.aType)
      },
      // 银行账户按钮
      bank() {
        this.isbank = true,
          this.isalipay = false
        this.isbank = "primary",
          this.isAlipay = ""
      },
      // 支付宝账户按钮
      Alipay() {
        this.isbank = false,
          this.isalipay = true
        this.isbank = "",
          this.isAlipay = "primary"
        this.Alipaylist()
      },
      // 添加银行账户
      addbank() {
        this.dialogFormVisible1 = true
      },
      // 添加支付宝账户
      addalipay() {
        this.dialogFormVisible2 = true
      },
      // 添加银行账户确定按钮
      submitbankData() {
        this.$post("/cw/mchBank/save", {


          companyName: this.bankData.companyName,
          bankName: this.bankData.bankName,
          bankBranckName: this.bankData.bankBranckName,
          bankAccount: this.bankData.bankAccount,
          aType: 0
        }).then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            console.log("添加成功")
            this.mchBanklist()
          } else {
            console.log("添加失败")
          }
        });
        this.dialogFormVisible1 = false
      },
      //  支付宝添加取消按钮
      nosubmit() {
        this.dialogFormVisible2 = false

      },
      // 支付宝添加按钮
      submitalipayData(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$post("/cw/mchAlipay/save", {

              aAccount: this.alipayData.aAccount,
              aName: this.alipayData.aName,
              aSort: this.alipayData.aSort,
              aType: 1,
              isDef: 0,
             mchId: JSON.parse(sessionStorage.getItem("userMsg")).userId,

            }).then((res) => {
              console.log(res);
              if (res.data.code === 200) {
                console.log("添加成功")
                this.$message({
                type: 'success',
                message: '删除成功！'
              });
                this.Alipaylist()
              } else {
                console.log("添加失败")
              }
            });
            this.dialogFormVisible2 = false
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      // 支付宝账户删除按钮
      del5(id) {
        console.log(id)
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$post("/cw/mchAlipay/deleteById", {
            id: id,
          }).then(res => {
            if (res.data.code === 200) {
              console.log(res);
              //删除成功之后提示
              this.$message({
                type: 'success',
                message: '删除成功！'
              });
              //并且重新请求数据
              this.Alipaylist()
            }
            else {
              //删除s失败之后提示
              this.$message({
                type: 'warning',
                message: res.msg
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },



      // 银行卡刷新
      mchBanklist() {
        this.$post("/cw/mchBank/select", {
          pageNum: 1,
          pageSize: 10,
          records: {},
        }).then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.bankData = res.data.data.records;
          } else {
            console.log(res)
          }
        });
      },
      // 支付宝刷新
      Alipaylist() {
        this.$post("/cw/mchAlipay/select", {
          pageNum: 1,
          pageSize: 10,
          records: {
            mchId: JSON.parse(sessionStorage.getItem("userMsg")).userId,
          },
        }).then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.alipayData = res.data.data.records;
          } else {
            console.log(res)
          }
        });
      }





    },
  };
</script>
<style scoped>
  html,
  body {
    height: 100%;
    margin: 0;
    font-size: 24px;
    color: #fff;
    font-family: "微软雅黑";
    /* line-height: 50px; */
  }

  .div-box {
    position: relative;
    width: 320px;
    height: 100%;
    margin: 20px 0;
    margin-left: 120px;
    background: #87cefa;
    border: #ccc solid 5px;
  }

  .el-aside {
    /* background-color: black; */
    color: white;
    height: 100%;
  }

  .el-header {
    background-color: black;
    color: white;
  }

  .el-main {
    background-color: white;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .el-menu {
    background-color: black;
  }

  .cell {
    text-align: center;
  }

  .el-table--border td,
  .el-table--border th {
    padding: 2px;
  }

  .posFrom {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
  }

  .boxForm {
    width: 500px;
    margin: 50px auto;
    background-color: #fff;
    border: 1px solid;
    padding: 10px 20px;
  }

  h3 {
    text-align: center;
    margin: 10px 0 20px 0;
  }

  .small {
    width: 80px;
  }

  .showImg {
    width: calc(100vw - 240px);
    /* height: 100%; */
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 10;
  }

  .showImg>div {
    width: 300px;
    display: flex;
    position: relative;
  }

  .showImg img {
    width: 100%;
    /* height: 60vh; */
  }

  .insideImg {
    position: absolute;
    width: 269px !important;
    height: 474px;
    top: 73px;
    left: 15px;
    overflow: hidden;
  }

  .insideImg img {
    width: 100%;
  }

  .close {
    background-color: rgb(64, 158, 255);
    height: 30px;
    width: 60px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    border-radius: 8px;
    cursor: pointer;
    z-index: 12;
  }

  .bg {
    background-color: rgb(64, 158, 255) !important;
    color: #fff !important;
  }

  .sky {
    width: 100%;
    padding-top: 200px;
    text-align: center;
    color: #999;
  }

  .el-checkbox {
    border: 1px solid red;
  }
</style>